<template>
  <div class="custom-service-content">
    <div class="custom-service-line title-font">{{ (parent.title === undefined||parent.title === null) ? '全部服务': parent.title }}</div>
    <div class="custom-service-line query-line">
      <div class="query-content">
        <div class="query-li li-font">
          共有服务：<span style="color: #bd2c00">{{ totalElements }}</span>
        </div>
        <div class="query-li"><el-checkbox :checked="form.zxbl" @change="changeBlfs">可在线办理</el-checkbox></div>
        <div class="query-li">
          <span style="cursor: pointer" @click="defaultOrder">默认排序</span>
        </div>
        <div class="query-li">
          <span>服务热度</span>
          <div class="order-button" @click="hotClick">
            <i class="el-icon-caret-top" :class="form.hot === true ? 'icon-active': ''" />
            <i class="el-icon-caret-bottom" :class="form.hot === false? 'icon-active': ''" />
          </div>
        </div>
        <div class="query-li">
          <span>上线时间</span>
          <div class="order-button" @click="timeClick">
            <i class="el-icon-caret-top " :class="form.time === true ? 'icon-active': ''" />
            <i class="el-icon-caret-bottom" :class="form.time === false ? 'icon-active': ''" />
          </div>
        </div>
      </div>
      <div class="query-input">
        <el-input v-model="form.blurry" placeholder="请输入内容" class="input-with-select">
          <el-button slot="append" type="primary" icon="el-icon-search" @click="initQuery" />
        </el-input>
      </div>
    </div>
    <div class="custom-service-ul">
      <el-empty v-if="dataList === null || dataList.length === 0" :image-size="100" />
      <div v-else class="custom-service-body" style="overflow: hidden">
        <el-scrollbar style="height: 100%;overflow-y: auto">
          <div v-for="item in dataList" :key="item.id" class="service-ul-li">
            <div class="service-image">
              <el-image lazy class="custom-image" :src="item.pcIcon !== null ? baseURL+item.pcIcon.substring(1,item.pcIcon.length):''">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </div>
            <div class="service-title">{{ item.name }} {{ ' / ' }}
              <span class="li-font" style="font-size: 13px">{{ '访问量：' + (item.fwcs === null|| item.fwcs === undefined ? 0: item.fwcs) }}</span>
              {{ ' / ' }}
              <span class="li-font" style="font-size: 13px">{{ '来源：' + (item.ssxtmc === null|| item.ssxtmc === undefined ? 0: item.ssxtmc) }}</span>
              {{ ' / ' }}
              <span class="li-font" style="font-size: 13px">{{ '上线日期：' + item.cjsj }}</span>
            </div>
            <!--            <div class="service-bm">{{ item.zgbmmc }}</div>-->
            <div class="service-button">
              <div v-if="isAuth === true ">
                <el-button type="text" round size="mini" :disabled="isAuth === true? false: true" @click="openEntity(item)">服务详情</el-button>
                <el-button type="text" round size="mini" :disabled="isAuth === true? false: true" @click="openWindow(item)">立即办理</el-button>
              </div>
              <div v-else>
                <el-popover
                  placement="top"
                  trigger="hover"
                  width="200"
                >
                  <p>你还没有登录，请先登录</p>
                  <div style="text-align: right; margin: 0">
                    <el-button type="text" size="mini" @click="login">登录</el-button>
                  </div>
                  <el-button slot="reference" type="text" round size="mini" :disabled="isAuth === true? false: true" @click="openEntity(item)">服务详情</el-button>
                </el-popover>
                <el-popover
                  placement="top"
                  trigger="hover"
                  width="200"
                >
                  <p>你还没有登录，请先登录</p>
                  <div style="text-align: right; margin: 0">
                    <el-button type="text" size="mini" @click="login">登录</el-button>
                  </div>
                  <el-button slot="reference" type="success" round size="mini" :disabled="isAuth === true? false: true" @click="openWindow(item)">立即办理</el-button>
                </el-popover>
              </div></div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="custom-service-line">
      <el-pagination
        :current-page="form.current"
        :page-size="form.rows"
        :total="totalElements"
        layout="total,prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { queryAllGuestService, queryAllUserService } from '@/api/service';
import Config from '@/settings';
export default {
  name: 'Portal4NewFlContent',
  props: {
    column: {
      type: Object,
      default() {
        return {};
      }
    },
    dx: {
      type: String
    },
    parent: {
      type: Object,
      default() {
        return { };
      }
    }
  },
  data() {
    return {
      totalElements: 0,
      dataList: [],
      baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
      isAuth: false,
      form: {
        parentId: null,
        childId: null,
        zxbl: false,
        hot: null,
        fwdx: null,
        time: null,
        blurry: '',
        current: 1,
        rows: 10
      }
    };
  },
  computed: {
    builder() {
      return data => this.builderRate(data);
    }
  },
  watch: {
    dx: {
      handler(newData, oldData) {
        if (newData.indexOf('custom') === -1) {
          this.form.fwdx = newData;
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    parent: {
      handler(newData, oldData) {
        if (undefined !== newData && newData !== null) {
          this.form.parentId = newData.id;
        }
        this.initData();
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  created() {
    this.initData();
  },
  methods: {
    changeBlfs() {
      if (this.form.zxbl === false) {
        this.form.zxbl = true;
      } else {
        this.form.zxbl = false;
      }
      this.initData();
    },
    hotClick() {
      if (this.form.hot === false) {
        this.form.hot = true;
      } else {
        this.form.hot = false;
      }
      this.initData();
    },
    handleCurrentChange(val) {
      this.form.current = val;
      this.initData();
    },
    handleSizeChange(val) {
      this.form.rows = val;
      this.initData();
    },
    timeClick() {
      if (this.form.time === false) {
        this.form.time = true;
      } else {
        this.form.time = false;
      }
      this.initData();
    },
    defaultOrder() {
      this.form.time = null;
      this.form.hot = null;
      this.initData();
    },
    initQuery() {
      this.initData();
    },
    openEntity(obj) {
      this.$emit('fact-entity', obj);
    },
    openWindow(obj) {
      window.open(obj.openUrl, '_blank');
    },
    builderRate(data) {
      if (data !== null && data.ratesum !== null) {
        return parseFloat((data.ratesum / data.ratecount).toFixed(1));
      } else {
        return 5;
      }
    },
    login() {
      if (Config.isCas) {
        this.$router.push('/login');
      }
    },
    init(obj) { // 父节点调用
      this.form.parentId = null;
      if (obj.value.indexOf('custom') === -1) { // 服务对象
        this.form.fwdx = obj.value;
      } else {
        this.form.fwdx = null;
      }
      this.initData();
    },
    initData() {
      if (getToken()) {
        this.isAuth = true;
        queryAllUserService(this.form).then(res => {
          const { data } = res;
          this.dataList = data.data;
          this.totalElements = data.pager.totalElements;
        }).catch(() => {
          console.log('初始化服务数据失败！');
        });
      } else {
        this.isAuth = false;
        queryAllGuestService(this.form).then(res => {
          const { data } = res;
          this.dataList = data.data;
          this.totalElements = data.pager.totalElements;
        }).catch(() => {
          console.log('初始化服务失败！');
        });
      }
    }
  }
};
</script>

<style scoped>
.custom-service-content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  padding: 0px 15px;
  box-sizing: border-box;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
}
.custom-service-ul {
  flex: 1 1 auto;
  width: 100%;
}
.custom-service-line {
  flex: 0 1 auto;
  width: 100%;
  height: 3rem;
  font-size: 14px;
  text-align: left;
  line-height: 3rem;
}
.query-line {
  background-color: #f5f5f5;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-flow: row nowrap;
  padding: 0px 15px;
  box-sizing: border-box;
}
.title-font {
  font-size: 1.45rem;
  font-weight: 600;
  color: #000000;
}
.query-content {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
}
.query-input {
  flex: 0 1 auto;
  width: 14.5rem;
}
.query-li {
  flex: 0 1 auto;
  width: 10rem;
  position: relative;
  text-align: left;
  white-space: nowrap;
}
.query-li span {
  display: inline-block;
}

.order-button {
  position: absolute;
  width: 20px;
  height: 3rem;
  left: 66px;
  top: 0px;
  white-space: normal;
  line-height: 8px;
  cursor: pointer;
}

.order-button i {
  width: 100%;
  height: 8px;
  line-height: 8px;
}

.el-icon-caret-top {
  margin-top: 1rem;
}
.li-font {
  color: #909399;
}
.icon-active {
  color: #4a98f6;
}
.custom-service-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.service-ul-li {
  width: 100%;
  height: 3.5rem;
  flex: 0 1 auto;
  line-height: 3.5rem;
  display: flex;
  flex-flow: row nowrap;
}
.service-image {
  width: 3.5rem;
  flex: 0 1 auto;
  padding: 1rem;
  box-sizing: border-box;
}
.service-title {
  flex: 1 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.service-bm {
  flex: 0 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 15rem;
}
.service-button {
  flex: 0 1 auto;
  width: 14rem;
}
.service-ul-li:not(:last-child) {
  border-bottom: 1px solid #f5f5f5;
}
.service-ul-li:nth-child(even) {
  background-color: #F2F6FC;
}

.service-ul-li:nth-child(odd) {
  background-color: #ffffff;
}
.service-ul-li:hover {
  background-color: #EBEEF5;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
